<!--
 * @Description: 
 * @Author: wuhaohu
 * @Date: 2023-02-27 17:59:01
 * @LastEditors: wuhaohu
 * @LastEditTime: 2023-03-16 17:12:37
 * @FilePath: \yidiandian\src\views\Index.vue
-->
<script setup lang="ts">
const state = {
  tooptipProp: {
    color: "#FFF",
    overlayStyle: {
      borderRadius: 8,
    }
  }
};
// const user = await userApi.getUserProfile()
// console.log(user, '获取用户信息')
</script>
<template>
  <div class="content-bar">
    <img class="home-bg" src="../assets/images/home-bg.png" />
    <div class="right-bar">
      <img class="title" src="../assets/images/title.png" >
      <div class="btn-bar">
        <a-tooltip v-bind="{...state.tooptipProp}">
          <template #title>
            <div class="img-code">
              <img src="../assets/images/qrcode.png" alt="">
            </div>
          </template>
          <img src="../assets/images/android.png" />
        </a-tooltip>
        <a-tooltip v-bind="{...state.tooptipProp}" >
          <template #title>
            <div class="img-code">
              <img src="../assets/images/qrcode.png" alt="">
            </div>
          </template>
          <img src="../assets/images/ios.png" />
        </a-tooltip>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.content-bar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  .home-bg {
    width: auto;
    height: 70%;
  }
  .right-bar {
    display: flex;
    height: 70%;
    padding: 0 5%;
    flex-direction: column;
    justify-content: center;
    .title {
      height: auto;
      width: 70%;
      margin-bottom: 15%;
    }
    .btn-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      img {
        width: auto;
        height: 50px;
        cursor: pointer;
        &:last-child {
          margin-left: 20px;
          margin-right: 100px;
        }
      }
    }
  }
}
</style>
<style lang="less">
  .img-code {
    width: 200px;
    height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
